<template>
	<div class="spec-preview">
		<img :src="imgObj.imgUrl" />
		<div class="event" @mousemove="changBig"></div>
		<div class="big">
			<img :src="imgObj.imgUrl" ref="big" />
		</div>
		<div class="mask" ref="mask"></div>
	</div>
</template>

<script>
import throttle from 'lodash/throttle';
export default {
	name: 'Zoom',
	props: ['skuImageList'],
	data() {
		return {
			// 初始图片
			num: 0,
		};
	},
	computed: {
		imgObj() {
			return this.skuImageList[this.num] || {};
		},
	},
	methods: {
		// 节流
		changBig: throttle(function (event) {
			let mask = this.$refs.mask;
			let big = this.$refs.big;
			// 鼠标进入默认垂直居中于遮罩层
			let left = event.offsetX - mask.offsetWidth / 2;
			let top = event.offsetY - mask.offsetHeight / 2;
			// 限制遮罩层移动区域
			if (left <= 0) left = 0;
			if (left >= mask.offsetWidth) left = mask.offsetWidth;
			if (top <= 0) top = 0;
			if (top >= mask.offsetHeight) top = mask.offsetHeight;
			// 遮罩层
			mask.style.left = left + 'px';
			mask.style.top = top + 'px';
			// 大图
			big.style.left = -2 * left + 'px';
			big.style.top = -2 * top + 'px';
		}, 15),
	},
	mounted() {
		this.$bus.$on('changImgUrl', index => {
			this.num = index;
		});
	},
};
</script>

<style scoped>
.spec-preview {
	position: relative;
	width: 400px;
	height: 400px;
	border: 1px solid #ccc;
}
.spec-preview img {
	width: 100%;
	height: 100%;
}
.spec-preview .event {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 998;
	cursor: move;
}
.spec-preview .mask {
	width: 50%;
	height: 50%;
	background-color: rgba(0, 255, 0, 0.3);
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}
.spec-preview .big {
	width: 100%;
	height: 100%;
	position: absolute;
	top: -1px;
	left: 100%;
	border: 1px solid #aaa;
	overflow: hidden;
	z-index: 998;
	display: none;
	background: white;
}
.spec-preview .big img {
	width: 200%;
	max-width: 200%;
	height: 200%;
	position: absolute;
	left: 0;
	top: 0;
}
.spec-preview .event:hover ~ .mask,
.spec-preview .event:hover ~ .big {
	display: block;
}
</style>
